$def with (wpm,mpm,ranks)


    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
      </div>
    </div>

    <div class="container">
      <!-- Example row of columns -->
        <div class="col-md-6">
          <h2>HeadingRanks</h2>
   <table class="table">
          <thead>
             <tr>
                 <th>rank时间</th>
                 <th>rank</th>
             </tr>
          </thead>
          <tbody>
             $for k,v in ranks.items():
             <tr>
                <td>$k</td>
                <td>$v</td>
             </tr>
          </tbody>
    </table>
          
        </div>
        <div class="col-md-6">
        <h2>Heading----</h2>
        <ul id=chart1>
	         <canvas id="rank_chart" width="400" height="500">
               Your web-browser does not support the HTML 5 canvas element.
             </canvas>
     </ul>
     </div>
     </div>
     
     
     <div class="container">
        <div class="col-md-6">
          <h2>HeadingWeekPM</h2>
   <table class="table">
          <thead>
             <tr>
                 <th>pm时间</th>
                 <th>pm</th>
             </tr>
          </thead>
          <tbody>
             $for k,v in wpm.items():
             <tr>
                <td>$k</td>
                <td>$v</td>
             </tr>
          </tbody>
    </table>
    </div>
    <div class="col-md-6">
    <h2>Table</h2>
    <ul id=chart1>
	         <canvas id="week_pm_chart" width="400" height="500">
               Your web-browser does not support the HTML 5 canvas element.
             </canvas>
     </ul>
     </div>
      </div>
<script>			
		var lineChartData = {
			labels : [],
			datasets : [
			           {
			           fillColor : "rgba(220,220,220,0.5)",
			           strokeColor : "rgba(220,0,1,1)",
			           pointColor : "rgba(220,220,220,1)",
			           pointStrokeColor : "#fff",
			           data : []
			           },
			]
			
		}
		       $for k,v in ranks.items():
		           lineChartData.labels.push("$k")
		           lineChartData.datasets[0].data.push($v)

	var myLine = new Chart(document.getElementById("rank_chart").getContext("2d")).Line(lineChartData);
	
	</script>
<script>			
		var lineChartData = {
			labels : [],
			datasets : [
			           {
			           fillColor : "rgba(220,220,220,0.5)",
			           strokeColor : "rgba(220,0,1,1)",
			           pointColor : "rgba(220,220,220,1)",
			           pointStrokeColor : "#fff",
			           data : []
			           },
			           {
			           fillColor : "rgba(220,220,220,0.5)",
			           strokeColor : "rgba(220,0,1,1)",
			           pointColor : "rgba(220,220,220,1)",
			           pointStrokeColor : "#fff",
			           data : []
			           },
			]
			
		}
		       $for k,v in wpm.items():
		           lineChartData.labels.push("$k")
		           lineChartData.datasets[0].data.push($v)
		       $for k,v in mpm.items():
		           lineChartData.datasets[1].data.push($v)

	var myLine = new Chart(document.getElementById("week_pm_chart").getContext("2d")).Line(lineChartData);
	
	</script>